<template>
  <view class="listItemWrap">
    <view class="listItem">
      <view class="titleImg">
        <uv-image
          :show-loading="true"
          :src="src"
          width="120rpx"
          height="120rpx"
        ></uv-image>
      </view>
      <view class="itemContent">
        <view class="title">
          <view class="mr6">
            <ArticleTypeStyle :type="2" :disabled="false" />
          </view>
          <view :class="['titleText', 'uv-line-1', { disabled }]">
            大标题大标题大标题大标题大标题题大标题大标题大标题大标题大标题题
          </view>
        </view>
        <view :class="['itemPrice', { disabled }]">￥345</view>
        <view class="itemData">
          <view class="itemTime">12月1日 13:22</view>
          <view class="itemViewNum">
            <uv-icon name="eye" color="#999999" size="32rpx"></uv-icon>
            999+
          </view>
          <view class="itemReplyNum">
            <uv-icon name="chat" color="#999999" size="32rpx"></uv-icon>
            999+
          </view>
          <view class="itemCollectNum">
            <uv-icon name="star" color="#999999" size="32rpx"></uv-icon>
            999+
          </view>
        </view>
      </view>
      <view :class="['viewStatus', { notView }]">
        <uv-icon
          :name="notView ? 'eye-off' : 'eye'"
          :color="notView ? 'rgba(153, 153, 153, 1)' : 'rgba(65, 172, 241, 1)'"
          size="32rpx"
        ></uv-icon>
        {{ notView ? "已隐藏" : "已公开" }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { publishType } from "/utils/enums/index.js";

import ArticleTypeStyle from "/components/ArticleTypeStyle/index.vue";

const disabled = ref(true);

const src = ref(
  "https://ts1.cn.mm.bing.net/th/id/R-C.526534e86fbf5b0393c3786476354596?rik=4c%2f6H8efTGfetQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20190403%2f21%2f1554298696-ctPdXnbaVY.jpg&ehk=HWIBm7fjChTkc8AQW2zPCN5yhY5zWv6tHy2gfK7wZ2A%3d&risl=&pid=ImgRaw&r=0"
);

const notView = ref(true);
</script>

<style lang="scss">
.listItemWrap {
  padding: 0 30rpx;
}
.listItem {
  padding: 30rpx 0;
  display: flex;
  position: relative;
  border-bottom: 1px solid #eeeeee;
}
.titleImg {
  border-radius: 10rpx;
  overflow: hidden;
  margin-right: 10rpx;
}
.title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.titleText {
  flex: 1;
  &.disabled {
    color: rgba(51, 51, 51, 1);
  }
}
.itemContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-weight: 500;
  color: #333333;
  font-size: 28rpx;
}
.itemPrice {
  font-size: 39rpx;
  font-weight: bold;
  color: #e60014;
  &.disabled {
    color: rgba(153, 153, 153, 1);
  }
}
.itemData {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #999999;
  font-size: 20rpx;
}

.itemViewNum,
.itemReplyNum,
.itemCollectNum {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.viewStatus {
  width: 130rpx;
  height: 44rpx;
  border: 1px solid #41acf1;
  border-radius: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #41acf1;
  font-size: 20rpx;

  position: absolute;
  bottom: 32rpx;
  right: 0;

  &.notView {
    background: rgba(238, 238, 238, 1);
    border-color: rgba(238, 238, 238, 1);
    color: #333333;
  }
}
</style>
